<template>
  <div class="con">
    <div class="con-left">
      <div class="conl-top">
        <img :src="user.avatar||img">
        <span>{{user.nickName}}</span>
      </div>
      <div :class="current==0?'conl-item conl-add':'conl-item'"
           @click="setcurr(0)">基本信息</div>
      <div :class="current==1?'conl-item conl-add':'conl-item'"
           @click="setcurr(1)">修改信息</div>
    </div>
    <div class="con-right">
      <div class="conr-box"
           v-if="current==0">
        <div class="alog">
          <p><span>*</span>头像
            <!-- <span style="color:#999999;">(60*60)</span> -->
          </p>
          <!-- <p></p> -->
          <el-upload class="avatar-uploader"
                     :action="baseUrl+'/common/upload'"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img :src="user.img"
                 class="avatar">
          </el-upload>
          <el-upload class="avatar-uploader"
                     style="width:auto"
                     :action="baseUrl+'/common/upload'"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <span class="avatar">点击修改头像</span>
          </el-upload>

        </div>
        <div class="alog">
          <p><span>*</span>姓名</p>
          <input type="text"
                 maxlength="11"
                 v-model="user.newname"
                 placeholder="请输入名称">
        </div>
        <div class="alog">
          <p><span>*</span>性别</p>
          <el-radio v-model="user.sex"
                    label="0">男</el-radio>
          <el-radio v-model="user.sex"
                    label="1">女</el-radio>
        </div>
        <div class="alog-but"
             @click="xiugai">确认</div>
      </div>
      <div class="conr-box"
           v-if="current==1">
        <div class="alog">
          <p><span>*</span>旧密码</p>
          <input type="password"
                 placeholder="请输入旧密码"
                 v-model="oldpass"
                 maxlength="20">
        </div>
        <div class="alog">
          <p><span>*</span>新密码</p>
          <input type="password"
                 placeholder="请输入新密码"
                 v-model="newpass"
                 maxlength="20">
        </div>
        <div class="alog">
          <p><span>*</span>确认密码</p>
          <input type="password"
                 placeholder="请输入新密码"
                 v-model="repass"
                 maxlength="20">
        </div>
        <div class="alog-but"
             @click="queren">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      img: require('../assets/img/user.png'),
      current: 0,
      oldpass: '', // 旧密码
      newpass: '', // 新密码
      repass: '', // 确认新密码
      user: {},
      baseUrl: '',
      radio: 1
    }
  },
  mounted () {
    this.baseUrl = this.$baseUrl;
    this.init()
  },
  methods: {
    init () {
      this.$getRequest('/getInfo', {}).then((res) => {
        if (res.code == 200) {
          res.user.img = res.user.avatar;
          res.user.newname = res.user.nickName;
          this.user = res.user
        }
      })
    },
    setcurr (num) {
      if (this.current != parseInt(num)) {
        this.current = parseInt(num)
        if (parseInt(num) == 0) {
          this.init()
        }
      }
    },
    handleAvatarSuccess (res) {
      if (res.code == 200) {
        this.user.img = res.msg
      } else {
        this.$message.arror(res.msg)
      }
    },
    beforeAvatarUpload (file) {
      var name = file.name;
      var ext = name.substr(name.lastIndexOf('.') + 1)
      var flag = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
      if (!flag) {
        this.$message.error('请上传正确的图片')
      }
      return flag
    },
    queren () {
      if (this.oldpass.length == 0) {
        this.$message.error('请输入旧密码')
      } else if (this.newpass.length == 0) {
        this.$message.error('请输入新密码')
      } else if (this.repass !== this.newpass) {
        this.$message.error('两次密码输入的不一致')
      } else if (this.oldpass.search(/^[a-zA-Z0-9]{1,20}$/) == -1) {
        this.$message.error('密码只能是字母和数字')
      } else if (this.oldpass.search(/^[a-zA-Z]{1,20}$/) > -1 || this.oldpass.search(/^[0-9]{1,20}$/) > -1) {
        this.$message.error('密码由字母和数字组成')
      } else {
        return
        this.$setRequest('/system/user/resetMyselfPwd', {
          uid: '' + this.user.userId,
          newPwd: this.newpass,
          oldPwd: this.oldpass
        }, 'put').then((res) => {
          if (res.code == 200) {
            this.$message.success('修改成功')
          }
        })
      }
    },
    xiugai () {
      if (!this.user.img || this.user.img == '') {
        this.$message.error('请选择头像')
      } else if (!this.user.newname || this.user.newname == '') {
        this.$message.error('请输入昵称')
      } else if (this.user.sex != 0 && this.user.sex != 1) {
        this.$message.error('请选择性别')
      } else {
        this.$setRequest('/system/user', {
          userId: this.user.userId,
          avatar: this.user.img,
          nickName: this.user.newname,
          sex: this.user.sex
        }, 'put').then((res) => {
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.init()
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.con {
  width: calc(100% - 40px);
  min-height: calc(100% - 40px);
  margin: 20px;
  display: flex;
}
.con-left {
  width: 260px;
  background: #fff;
}
.conl-top {
  width: 100%;
  height: 210px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
}
.conl-top > img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.conl-item {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #000;
  cursor: pointer;
}
.conl-add {
  background: #0056dc;
  color: #fff;
}
.con-right {
  width: calc(100% - 340px);
  padding: 70px 30px 30px;
  margin-left: 20px;
  background: #fff;
}
.conr-box {
  width: 800px;
}
.alog {
  width: 800px;
}
.alog > img,
.avatar-uploader {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 22px;
  cursor: pointer;
  padding: 0;
  text-align: center;
  line-height: 60px;
  border: none;
}
.alog .avatar {
  font-size: 14px;
  color: #b6b6b6;
  cursor: pointer;
  line-height: 60px;
}
.el-radio {
  line-height: 48px;
}
.alog /deep/ .el-radio__label {
  color: #000;
}
.alog /deep/ .el-upload {
  background: #fff !important;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.alog .alog-but {
  width: 600px;
}
.tips {
  color: red;
  font-size: 22px;
  margin: 40px 0 0 40px;
}
.conr-right /deep/ .el-radio__label {
  font-size: 26px;
}
</style>
